<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-table-rate">
    <!-- <pord-title :prodTitle="'运费设置'" :isOpen="isOpen" @close="close" /> -->
    <view class="body">
      <view
        :class="['list', deliveryIndex.index == 1 ? 'active' : '']"
        @tap="deliveryIndex.index = 1"
      >
        <view class="left">
          <view class="iconfont option">
            &#xe659;
          </view><text>统一包邮</text>
        </view>
      </view>
      <view
        :class="['list', deliveryIndex.index == 2 ? 'active' : '']"
        @tap="deliveryIndex.index = 2"
      >
        <view class="left">
          <view class="iconfont option">
            &#xe659;
          </view><text>固定运费</text><text class="hint">
            {{ deliveryIndex.pic > 0 ? deliveryIndex.pic : 0.00 }}
          </text>
        </view>
        <text
          class="right"
          @tap="toUnifyFeight"
        >
          编辑
        </text>
      </view>
      <view
        :class="['list', deliveryIndex.index == 3 ? 'active' : '']"
        @tap="deliveryIndex.index = 3"
      >
        <view class="left">
          <view class="iconfont option">
            &#xe659;
          </view><text>运费模板</text>
        </view>
        <text
          class="right"
          @tap="toFreightTemplate"
        >
          选择
        </text>
      </view>
    </view>
    <view class="reminder">
      运费模板支持按地区、购买件数、按重量计算运费等
    </view>
    <view class="footer">
      <button
        class="button"
        type="primary"
        @tap="toPostProd"
      >
        确定
      </button>
    </view>
  </view>
</template>

<script setup>
const prodStore = useProdStore()
const deliveryIndex = computed(() => prodStore.deliveryIndex)

// 统一运费
const toUnifyFeight = () => {
  uni.navigateTo({
    url: '/package-prod/pages/post-prod/unify-fieight'
  })
}

// 运费模板
const toFreightTemplate = () => {
  uni.navigateTo({
    url: '/package-prod/pages/post-prod/freight-template'
  })
}

const toPostProd = () => {
  // 统一包邮
  if (prodStore.deliveryIndex.index === 1) {
    prodStore.dataForm.deliveryTemplateId = 0
    prodStore.dataForm.deliveryTemplateName = '统一包邮'
    prodStore.dataForm.deliveryAmount = null
  }

  // 统一运费
  if (prodStore.deliveryIndex.index === 2) {
    // 判断是否输入运费金额
    if (!prodStore.deliveryIndex.pic > 0) {
      uni.showToast({
        title: '请设置金额',
        icon: 'none'
      })
      return
    }

    prodStore.dataForm.deliveryTemplateId = -1
    prodStore.dataForm.deliveryTemplateName = prodStore.deliveryIndex.pic + '元'
    prodStore.dataForm.deliveryAmount = prodStore.deliveryIndex.pic
  }

  // 运费模板
  if (prodStore.deliveryIndex.index === 3) {
    // 判断选择模板
    if (prodStore.deliveryIndex.id === null) {
      uni.showToast({
        title: '请选择模板',
        icon: 'none'
      })
      return
    }

    prodStore.dataForm.deliveryTemplateId = prodStore.deliveryIndex.id
    prodStore.dataForm.deliveryTemplateName = prodStore.deliveryIndex.name
    prodStore.dataForm.deliveryAmount = null
  }

  uni.redirectTo({
    url: '/package-prod/pages/post-prod/post-prod'
  })
}
</script>

<style lang="scss" scoped>
.page-table-rate {
  width: 100%;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 28rpx;
  background-color: #f8f8f8;
  color: #333;
  font-family: PingFang SC;

  .body {
    border-radius: 10rpx;
    margin-top: 20rpx;
    background-color: #fff;
    padding: 0 30rpx;

    .list {
      display: flex;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 2rpx solid #F2F2F2;
      line-height: 90rpx;

      .left {

        .option {
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          border: 2rpx solid #D1D1D1;
          box-sizing: border-box;
          text-align: center;
          font-size: 12rpx;
          line-height: 36rpx;
          color: #fff;
          margin-right: 16rpx;
        }

        .hint {
          color: #999999;
          margin-left: 20rpx;
        }
      }

      .right {
        color: #082BA6;
      }
    }

    .active {
      .left {

        .option {
          border: none;
          background-color: #082BA6;
        }
      }
    }
  }

  .reminder {
    padding: 0 30rpx;
    margin: 20rpx 0 40rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .footer {
    padding: 0 30rpx;

    button {
      background-color: #082BA6;
    }
  }
}
</style>
